<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg" >

<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="row">
		<!--左边布局-->
		<div class="col-sm-6" id="tht">
			<div class="ibox">
				<div class="ibox-content text-center">
					<h3 class="m-b-xxs">暮云圈-最新消息</h3>
				</div>
			</div>

			<div class="social-feed-box" th:each="obj : ${socialCircleOne}">
				<div class="pull-right social-action dropdown" th:name="${obj.pcid}">
					<button data-toggle="dropdown" class="dropdown-toggle btn-white">
						<i class="fa fa-angle-down"></i>
					</button>
					<ul class="dropdown-menu m-t-xs">
						<li><a href="#">你好</a></li>
					</ul>
				</div>
				<div class="social-avatar" >
					<a href="#" class="pull-left">
						<img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png">
					</a>
					<div class="media-body">
						<a href="#" th:text="${obj.uid}">***</a>
						<small class="text-muted" th:text="${obj.adddate}">***</small>
					</div>
				</div>
				<div class="social-body">
					<p th:text="${obj.pcontent}" style="font-weight: 600">*****</p>
				</div>
					<div>
						<div class="social-footer" th:each="objs:${obj.child}" >
							<div class="social-comment">
								<a href="#" class="pull-left">
									<img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png">
								</a>
								<div class="media-body">
									<a href="#" th:text="${objs.uid}">****</a> <small class="text-muted" th:text="${objs.ccontent}">***</small><br/>
									<a href="#" class="small"><i class="fa fa-thumbs-up"></i></a> -
									<small class="text-muted" th:text="${objs.cdate}">****</small>
								</div>
							</div>
						</div>
						<div class="social-comment">
							<div class="media-body">
								<textarea class="form-control" placeholder="填写评论...(待完善)" disabled="disabled"></textarea>
							</div>
						</div>
					</div>
			</div>
		</div>
		<!--右边布局-->
		<div class="col-sm-6" id="tht2">
			<div class="ibox ">
				<div class="ibox-content text-center">
					<h3 class="m-b-xxs">暮云圈-热度榜</h3>
				</div>
			</div>
			<div class="social-feed-separated" th:each="obj2 : ${socialCircleTwo}">

				<div class="social-avatar">
					<a href="#">
						<img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png">
					</a>
				</div>

				<div class="social-feed-box">

					<div class="pull-right social-action dropdown">
						<button data-toggle="dropdown" class="dropdown-toggle btn-white">
							<i class="fa fa-angle-down"></i>
						</button>
						<ul class="dropdown-menu m-t-xs">
							<li><a href="#">你好</a></li>
						</ul>
					</div>
					<div class="social-avatar">
						<a href="#" th:text="${obj2.uid}">
							***
						</a>
						<small class="text-muted" th:text="${obj2.adddate}">***</small>
					</div>
					<div class="social-body">
						<p style="font-weight: 600" th:text="${obj2.pcontent}">
							***
						</p>
						<img src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png" class="img-responsive">
					</div>
					<div>
						<div class="social-footer" th:each="objs:${obj2.child}" >
							<div class="social-comment">
								<a href="#" class="pull-left">
									<img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png">
								</a>
								<div class="media-body">
									<a href="#" th:text="${objs.uid}">****</a> <small class="text-muted" th:text="${objs.ccontent}">***</small><br/>

									<a href="#" class="small"><i class="fa fa-thumbs-up"></i></a> -
									<small class="text-muted" th:text="${objs.cdate}">****</small>
								</div>
							</div>
						</div>
						<div class="social-comment"><div class="media-body"><textarea class="form-control" placeholder="填写评论...(待完善)" disabled="disabled"></textarea></div></div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div style="width: 100%;height: 35px;text-align:center;background-color: #17b86b"><a onclick="data(this)" th:name="${index}" ><h2 style="color: #2E2D3C">加载更多</h2></a></div>
</div>
<div th:include="include :: footer"></div>

<script>
	function data(obj) {
		//获取每个图片id，以字符串形式
		var index = $(obj).attr("name");
		$.ajax({
			url: ctx+'village/SocialCircle/addindex',
			type: 'POST', //请求方法 GET or POST
			async: true, //是否使用异步请求的方式
			timeout: 3000, //请求超时的时间，以毫秒计
			data: {
				index: index
			},
			dataType: 'json',
			success: function (data) {
				console.log(data);
				$(obj).attr("name",data.index);

				var html1 = '';
				for (var i =0;i<data.socialCircleOne2.length;i++){
					html1 += '<div class="social-feed-box"> <div class="pull-right social-action dropdown"> <button data-toggle="dropdown" class="dropdown-toggle btn-white"> <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu m-t-xs"> <li><a href="#">你好</a></li> </ul> </div> <div class="social-avatar"> ';
					html1 += '<a href="#" class="pull-left"><img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png"> </a><div class="media-body">  <a href="#" >'+ data.socialCircleOne2[i].uid+' </a> <small class="text-muted" >'+data.socialCircleOne2[i].adddate+'</small> </div> ';
					html1 += '<div class="social-body"> <p style="font-weight: 600">'+data.socialCircleOne2[i].pcontent+' </p> </div><div> ';
					for (var j=0;j<data.socialCircleOne2[i].child.length;j++){
						html1 += '<div class="social-footer" > <div class="social-comment"> <a href="#" class="pull-left"> <img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png"> </a> <div class="media-body">';
						html1 += '<a href="#" >'+data.socialCircleOne2[i].child[j].uid+'</a> <small class="text-muted">'+data.socialCircleOne2[i].child[j].ccontent+'</small><br/>';
						html1 += '<a href="#" class="small"><i class="fa fa-thumbs-up"></i></a> - <small class="text-muted">'+data.socialCircleOne2[i].child[j].cdate+'</small></div> </div> </div>';
					}
					html1 += '<div class="social-comment"><div class="media-body"><textarea class="form-control" placeholder="填写评论...(待完善)" disabled="disabled"></textarea></div></div> </div> </div></div>';
				}
				var htmls = '';
				for (var i =0;i<data.socialCircleTwo2.length;i++){
					htmls += '<div class="social-feed-separated"><div class="social-avatar"> <a href="#"> <img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png"> </a> </div> <div class="social-feed-box"> <div class="pull-right social-action dropdown"> <button data-toggle="dropdown" class="dropdown-toggle btn-white"> <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu m-t-xs"> <li><a href="#">删除</a></li> </ul> </div> <div class="social-avatar"> ';
					htmls += '<a href="#" >'+ data.socialCircleTwo2[i].uid+' </a> <small class="text-muted" >'+data.socialCircleTwo2[i].adddate+'</small> </div> ';
					htmls += '<div class="social-body"> <p >'+data.socialCircleTwo2[i].pcontent+' </p><img src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png" class="img-responsive"> </div> <div>';
					for (var j=0;j<data.socialCircleTwo2[i].child.length;j++){
						htmls += '<div class="social-footer" > <div class="social-comment"> <a href="#" class="pull-left"> <img alt="image" src="https://lyb-iot-001-1256625471.cos.ap-guangzhou.myqcloud.com/fire_image/1.png"> </a> <div class="media-body">';
						htmls += '<a href="#" >'+data.socialCircleTwo2[i].child[j].uid+'</a> <small class="text-muted">'+data.socialCircleTwo2[i].child[j].ccontent+'</small><br/>';
						htmls += '<a href="#" class="small"><i class="fa fa-thumbs-up"></i></a> - <small class="text-muted">'+data.socialCircleTwo2[i].child[j].cdate+'</small></div> </div> </div>';
					}
					htmls += '<div class="social-comment"><div class="media-body"><textarea class="form-control" placeholder="填写评论...(待完善)" disabled="disabled"></textarea></div></div></div> </div></div>';
				}
				$("#tht").append(html1);
				$("#tht2").append(htmls);
			},
			error: function (data) {
				console.log("错误")
			}
		})
	}
	//setInterval("data()",1000*1);//5秒一次刷新数据库新增的图片
</script>
</body>
</html>